<script>
  import sheep from '@/sheep';

  export default {
    name: 'pcNavigation',
    data() {
      return {
        controlsList: [
          {
            text: '首页',
            activeIcon: '/assets/tabbar/pc_home_active.png',
            inactiveIcon: '/assets/tabbar/pc_home.png',
          },
          {
            text: '家庭',
            activeIcon: '/assets/tabbar/pc_family_active.png',
            inactiveIcon: '/assets/tabbar/pc_family.png',
          },
          {
            text: '家谱',
            activeIcon: '/assets/tabbar/pc_genealogy_active.png',
            inactiveIcon: '/assets/tabbar/pc_genealogy.png',
          },
          {
            text: '更多',
            activeIcon: '/assets/tabbar/pc_more_active.png',
            inactiveIcon: '/assets/tabbar/pc_more.png',
          },
        ],
        setUp: [{ name: '我的会员' }, { name: '印刷制作' }, { name: '意见反馈' }, { name: '设置' }],
      };
    },
    computed: {
      sheep() {
        return sheep;
      },
      IMG_URL() {
        return sheep.$store('AI').sq_image_path;
      },
      userInfo() {
        return sheep.$store('user').userInfo;
      },
      nc_image() {
        return sheep.$store('AI').nc_image;
      },
      current() {
        return sheep.$store('pc').sidebarOptions;
      },
    },
    methods: {
      toggle(index) {
        switch (index){
          case 0:
            sheep.$router.go('/pages/pc/index');
            break;
          case 1:
            sheep.$router.go('/pages/pc/family');
            break;
          case 2:
            // sheep.$router.go('/pages/pc/genealogy');
            break;
          case 3:
            // sheep.$router.go('/pages/pc/more');
            break;
        }
      },
    },
  };
</script>

<template>
  <view class="pcNavigation flex">
    <view class="content">
      <view class="contentLattice flex flex-column justify-between">
        <view id="headerIcon"
              class="flex align-center justify-center"
              style="border-bottom: 2rpx solid #E6E6E6; width: 100%"
        >
          <image class="wh_70 hW_70"
                 :src="`${IMG_URL}/index/genealogy_select.png`"
          ></image>
          <view class="flex flex-column ml_10">
            <view
              class="color_FF4206 fw_500 fs_38"
            >
              拾亲
            </view>
            <view
              class="color_FF4206 fw_500 fs_12"
            >
              再小的家庭 也要有传承
            </view>
          </view>
        </view>
        <view class="flex-sub mt_20 mb_20" style="position: relative">
          <scroll-view class="list_scroll" scroll-y>
            <view class="flex align-center flex-column flex-sub">
              <view class="flex align-center justify-center" v-for="(item, index) in controlsList" :key="index"
                    style="width: 100%;"
              >
                <view style="height: 20rpx"></view>
                <view class="flex align-center justify-center"
                      style="cursor: pointer;border-radius: 8px;padding: 20rpx 0;width: 80%;"
                      :style="{
                    background: index == current ? '#FF4206' : 'transparent',
                  }"
                      @click.stop="toggle(index)"
                >
                  <image v-if="current == index"
                         :src="sheep.$url.cdn(item.activeIcon)"
                         class="wh_40 hW_40"
                  ></image>
                  <image v-else
                         :src="sheep.$url.cdn(item.inactiveIcon)"
                         class="wh_40 hW_40"
                  ></image>
                  <view
                    class="fw_500"
                    style="margin-left: 10rpx"
                    :style="{
                      color: index == current ? '#FFFFFF' : '#5C5C5C',
                    }"
                  >
                    {{ item.text }}
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        <view class="flex flex-column align-center">
          <view class="flex flex-column align-center">
            <view v-for="(item, index) in setUp" :key="index"
                  @click.stop="functionPage(index)"
            >
              <view style="height: 20rpx"></view>
              <view class="flex align-center" style="cursor: pointer">
                <view
                  class="fw_500 fs_28"
                  style="color: #5C5C5C;"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <view style="border-top: 2rpx solid #E6E6E6;margin-top: 20rpx;cursor:pointer;margin-bottom: 20rpx;width: 80%;"
                class="flex flex-column align-center"
          >
            <image style="width: 100rpx;border-radius: 50%;margin-top: 20rpx;"
                   mode="widthFix"
                   :src="userInfo.avatar.indexOf('http') != -1 ? userInfo.avatar : `${nc_image}${userInfo.avatar}`"
            ></image>
            <view class="fs_22 fw_500 mt_15"
                  style="color: #5C5C5C"
            >
              {{ userInfo.nickname }}
            </view>
            <view class="fs_22 fw_500 mt_5"
                  style="color: #5C5C5C"
            >
              拾亲号: {{ userInfo.uid }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .pcNavigation {
    width: 13%;
    height: 100vh;
    font-family: Source Han Sans CN, Source Han Sans CN;
  }

  .content {
    position: fixed;
    width: 13%;
    height: 100%;
  }

  .contentLattice {
    position: absolute;
    width: 90%;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 98%;
    background: #ffffff;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
  }

  #headerIcon {
    padding: 36rpx 0;
  }

  .list_scroll {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
  }
</style>